<template>
  <nav class="nav-bar">
    <div class="btn" v-for="(nav, i) in navs" :key="i">
      <span v-if="nav.hasChild">{{ nav.name }}</span>
      <span v-else @click="changePage(nav.page)">{{ nav.name }}</span>
      <div class="btn-items-box" v-if="nav.hasChild">
        <ul class="btn-items">
          <li v-for="(item, i) in nav.children" :key="i" @click="changePage(item.page)">{{ item.name }}</li>
        </ul>
      </div>
    </div>

  </nav>
  <div>
    <component :is="page"></component>
  </div>
</template>
<script>
import DefaultPage from './view/DefaultPage.vue'
import singBa from './view/start/singeBa.vue'
import ErrorPage from './view/errorAndAssets/ErrorPage.vue'
import AssetsPage1 from './view/errorAndAssets/AssetsPage1.vue'
import AssetsBuildPage1 from './view/errorAndAssets/AssetsBuildPage1.vue'
import DeepStyle1 from './/view/style/DeepStyle1.vue'
import GloaborPart1 from './view/style/GloaborPart1.vue'
import SassPage1 from './view/style/SassPage1.vue'
import BulidProject1 from './view/style/BulidProject1.vue'
import AxiosPage from './view/ajax/AxiosPage.vue'
import InterceptorsAxios1 from './view/ajax/InterceptorsAxios1.vue'
import AxiosModel from './view/ajax/AxiosModel.vue'
import AjaxProxy from './view/ajax/AjaxProxy.vue'
import CompstionPage from './view/composition/CompstionPage.vue'
import compoentPage from './view/composition//compoentPage.vue'
import LifePage from './view/composition/LifePage.vue'
import ThisPage from './view/composition/ThisPage.vue'

export default {
  name: 'App',
  components: {
    DefaultPage,
    singBa, ErrorPage,
    AssetsPage1, AssetsBuildPage1,
    DeepStyle1, GloaborPart1,
    SassPage1,
    BulidProject1,
    AxiosPage,
    InterceptorsAxios1,
    AxiosModel,
    AjaxProxy,
    CompstionPage,
    compoentPage,
    LifePage,
    ThisPage


  },
  data() {
    return {
      page: "ThisPage",
      navs: [
        { name: "默认页", hasChild: false, page: "DefaultPage" },
        {
          name: "启动过程", hasChild: true, children: [
            { name: "单文件组件-简单结构", page: "A" },
            { name: "单文件组件-注意事项", page: "singBa" },

          ]
        },
        {
          name: "错误处理和静态资源", hasChild: true, children: [
            { name: "错误处理", page: "ErrorPage" },
            { name: "静态资源", page: "AssetsPage1" },
            { name: '资源编译', page: "AssetsBuildPage1" }
          ]
        },
        {
          name: "样式操作", hasChild: true, children: [
            { name: "全局样式和局部样式", page: "GloaborPart1" },
            { name: "样式穿透", page: "DeepStyle1" },
            { name: "动态样式", page: "SassPage1" },
          ]
        },
        { name: "项目打包", hasChild: false, page: "BulidProject1" },
        {
          name: "异步请求", hasChild: true, children: [
            { name: "axios的基本使用", page: "AxiosPage" },
            { name: "axios的拦截器使用", page: "InterceptorsAxios1" },
            { name: "axios的模块化", page: "AxiosModel" },
            { name: "开发代理服务器设置", page: "AjaxProxy" },
          ]
        },
        {
          name: "组合式API", hasChild: true, children: [
            { name: "基本语法定义", hasChild: false, page: "CompstionPage" },
            { name: "组件语法定义", hasChild: false, page: "compoentPage" },
            { name: "组合式语法定义", hasChild: false, page: "LifePage" },
            { name: "组合式API实例调用", hasChild: false, page: "ThisPage" },
          ]
        },
      ]
    }
  },
  methods: {
    changePage(page) {
      // console.log(page)
      this.page = page;
    }
  },

}
</script>
  
<style>
body {
  margin: 0px;
}

.nav-bar {
  background-color: #545c64;
  color: #e9ecf4;
  font-size: 0px;
  padding: 0px 60px;
  box-shadow: 0px 0px 4px #6e7276;
}

.nav-bar .btn {
  display: inline-block;
  min-width: 100px;
  text-align: center;
  font-size: 20px;
  margin-right: 30px;
  padding: 20px 0px;
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;
  border-bottom: 4px solid transparent;
  position: relative;
}

.nav-bar .btn:hover {
  border-color: #f7ca4b;
}

.nav-bar .btn:hover span {
  color: #f7ca4b;
}

.nav-bar .btn:hover .btn-items {
  display: block;
}

.nav-bar .btn .btn-items-box {
  position: absolute;
  padding: 30px 0px 0px 0px;
  transform: translate(40px, 0px);
}

.nav-bar .btn .btn-items {
  /* position: absolute; */
  background-color: #545c64;
  /* transform: translate(40px,24px); */
  margin: 0px;
  padding: 0px;
  list-style: none;
  min-width: 200px;
  text-align: left;
  padding: 10px 0px;
  border-radius: 4px;
  box-shadow: 0px 0px 4px #6e7276;
  display: none;
}

.nav-bar .btn .btn-items li {
  padding: 10px 14px;
  font-size: 16px;
  cursor: pointer;
}

.nav-bar .btn .btn-items li:hover {
  background-color: #434a50;
}
</style>